<template>
  <div class="product-layout">
    <aside class="category-sidebar">
      <div class="sidebar-header">
        <div class="section-title">
          <span>商品分组</span>
          <button class="add-btn" @click="$router.push('/commodity/category')">+</button>
        </div>
        <CategoryTree :nodes="categoryTree" :selected-id="searchForm.categoryId" @select="onPickCategory" />
      </div>
    </aside>

    <div class="product-list">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2>商品管理</h2>
        <div class="header-actions">
          <button class="btn btn-primary" @click="showAddModal = true">
            <span class="icon">+</span>
            新增商品
          </button>
        </div>
      </div>

      <!-- 搜索区域 -->
      <div class="search-section">
        <div class="search-form">
          <div class="form-group">
            <label>商品名称</label>
            <input v-model="searchForm.productName" type="text" placeholder="请输入商品名称" class="form-control" />
          </div>
          <div class="form-group">
            <label>商品分类</label>
            <select v-model="searchForm.categoryId" class="form-control">
              <option value="">全部分类</option>
              <option v-for="category in categoryOptions" :key="category.id" :value="category.id">{{ category.label }}</option>
            </select>
          </div>
          <div class="form-group">
            <label>创建时间</label>
            <div class="date-range">
              <input v-model="searchForm.startTime" type="datetime-local" class="form-control" />
              <span class="date-separator">至</span>
              <input v-model="searchForm.endTime" type="datetime-local" class="form-control" />
            </div>
          </div>
          <div class="form-actions">
            <button class="btn btn-primary" @click="handleSearch"><span class="icon">🔍</span>搜索</button>
            <button class="btn btn-secondary" @click="handleReset"><span class="icon">🔄</span>重置</button>
          </div>
        </div>
      </div>

      <!-- 数据表格 -->
      <div class="table-section">
        <div class="table-container">
          <table class="data-table">
            <thead>
              <tr>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>SPU编码</th>
                <th>商品分类</th>
                <th>品牌</th>
                <th>建议零售价</th>
                <th>状态</th>
                <th>库存</th>
                <th>创建时间</th>
                <th>商品图片</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in tableData" :key="item.id">
                <td>{{ item.id }}</td>
                <td class="product-name">{{ item.productName }}</td>
                <td>{{ item.spuCode || '-' }}</td>
                <td>{{ item.categoryName || '-' }}</td>
                <td>{{ item.brandName || '-' }}</td>
                <td class="price">¥{{ formatPrice(item.retailPrice) }}</td>
                <td>
                  <span :class="['status-badge', item.status === 1 ? 'active' : 'inactive']">
                    {{ item.status === 1 ? '上架' : '下架' }}
                  </span>
                </td>
                <td class="stock">{{ item.stock || 0 }}</td>
                <td>{{ formatDate(item.createdAt) }}</td>
                <td class="product-image">
                  <img v-if="item.imageUrl" :src="item.imageUrl" :alt="item.productName" class="product-img" />
                  <span v-else class="no-image">无图片</span>
                </td>
                <td class="actions">
                  <button class="btn btn-sm btn-info" @click="handleEdit(item)"><span class="icon">✏️</span>编辑</button>
                  <button class="btn btn-sm btn-danger" @click="handleDelete(item)"><span class="icon">🗑️</span>删除</button>
                </td>
              </tr>
            </tbody>
          </table>

          <div v-if="tableData.length === 0" class="empty-state">
            <div class="empty-icon">📦</div>
            <p>暂无商品数据</p>
          </div>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-section">
        <div class="pagination-info">共 {{ total }} 条记录，当前第 {{ currentPage }} 页</div>
        <div class="pagination">
          <button class="btn btn-sm" :disabled="currentPage === 1" @click="handlePageChange(currentPage - 1)">上一页</button>
          <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
          <button class="btn btn-sm" :disabled="currentPage === totalPages" @click="handlePageChange(currentPage + 1)">下一页</button>
        </div>
      </div>

      <!-- 新增/编辑弹窗 -->
      <div v-if="showAddModal || showEditModal" class="modal-overlay" @click="closeModal">
        <div class="modal" @click.stop>
          <div class="modal-header">
            <h3>{{ showEditModal ? '编辑商品' : '新增商品' }}</h3>
            <button class="close-btn" @click="closeModal">×</button>
          </div>
          <div class="modal-body">
            <form @submit.prevent="handleSubmit">
              <div class="form-row">
                <div class="form-group">
                  <label>商品名称 *</label>
                  <input v-model="formData.productName" type="text" required class="form-control" placeholder="请输入商品名称" />
                  <small v-if="formErrors.productName" class="error-text">{{ formErrors.productName }}</small>
                </div>
                <div class="form-group">
                  <label>商品分类 *</label>
                  <select v-model="formData.categoryId" required class="form-control">
                    <option value="">请选择分类</option>
                    <option v-for="category in categoryOptions" :key="category.id" :value="category.id">{{ category.label }}</option>
                  </select>
                  <small v-if="formErrors.categoryId" class="error-text">{{ formErrors.categoryId }}</small>
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label>品牌</label>
                  <select v-model="formData.brandId" class="form-control">
                    <option value="">请选择品牌</option>
                    <option v-for="brand in brandList" :key="brand.id" :value="brand.id">{{ brand.brandName }}</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>SPU编码</label>
                  <input v-model="formData.spuCode" type="text" class="form-control" placeholder="如：POLO-001" />
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label>条码</label>
                  <input v-model="formData.barCode" type="text" class="form-control" placeholder="请输入条码" />
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label>最近采购价</label>
                  <input v-model="formData.purchasePrice" type="number" step="0.01" class="form-control" placeholder="请输入最近采购价" />
                </div>
                <div class="form-group">
                  <label>标准成本</label>
                  <input v-model="formData.standardCost" type="number" step="0.01" class="form-control" placeholder="请输入标准成本" />
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label>建议零售价 *</label>
                  <input v-model.number="formData.retailPrice" type="number" step="0.01" min="0" required class="form-control" placeholder="请输入零售价" />
                  <small v-if="formErrors.retailPrice" class="error-text">{{ formErrors.retailPrice }}</small>
                </div>
                <div class="form-group">
                  <label>税率(%)</label>
                  <input v-model="formData.taxRate" type="number" step="0.01" class="form-control" placeholder="请输入税率%" />
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label>启用批次</label>
                  <select v-model="formData.enableBatch" class="form-control">
                    <option :value="0">否</option>
                    <option :value="1">是</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>启用序列号</label>
                  <select v-model="formData.enableSn" class="form-control">
                    <option :value="0">否</option>
                    <option :value="1">是</option>
                  </select>
                </div>
              </div>

              <div class="form-row">
                <div class="form-group">
                  <label>状态</label>
                  <select v-model="formData.status" class="form-control">
                    <option :value="1">上架</option>
                    <option :value="0">下架</option>
                  </select>
                </div>
                <div class="form-group">
                  <label>库存数量</label>
                  <input v-model.number="formData.stock" type="number" min="0" class="form-control" placeholder="请输入库存数量" />
                </div>
              </div>

              <div class="form-group">
                <label>商品图片</label>
                <div class="image-upload">
                  <input
                    type="file"
                    ref="imageInput"
                    @change="handleImageUpload"
                    accept="image/*"
                    style="display: none"
                  />
                  <div v-if="formData.imageUrl" class="image-preview">
                    <img :src="formData.imageUrl" alt="商品图片" class="preview-img" />
                    <button type="button" class="btn btn-sm btn-danger" @click="removeImage">删除图片</button>
                  </div>
                  <button v-else type="button" class="btn btn-secondary" @click="$refs.imageInput.click()">
                    选择图片
                  </button>
                </div>
              </div>

              <div class="form-group">
                <label>商品描述</label>
                <textarea v-model="formData.description" class="form-control" rows="3" placeholder="请输入商品描述"></textarea>
              </div>

              <div class="form-actions">
                <button type="button" class="btn btn-secondary" @click="closeModal" :disabled="submitting">取消</button>
                <button type="submit" class="btn btn-primary" :disabled="submitting">
                  {{ submitting ? (showEditModal ? '更新中...' : '创建中...') : (showEditModal ? '更新' : '创建') }}
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { getProductPage, createProduct, updateProduct, deleteProduct, getCategoryList, getBrandList, getCategoryTree, uploadImage, deleteImage } from '@/api/commodity'
import CategoryTree from '@/components/CategoryTree.vue'

// 响应式数据
const tableData = ref([])
const categoryList = ref([])
const categoryTree = ref([])
const categoryOptions = ref([])
const brandList = ref([])
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
const loading = ref(false)

// 弹窗状态
const showAddModal = ref(false)
const showEditModal = ref(false)
const editingItem = ref(null)

// 搜索表单
const searchForm = reactive({
  productName: '',
  categoryId: '',
  startTime: '',
  endTime: ''
})

// 表单数据
const formData = reactive({
  productName: '',
  categoryId: '',
  brandId: '',
  spuCode: '',
  barCode: '',
  purchasePrice: '',
  standardCost: '',
  retailPrice: '',
  taxRate: '',
  enableBatch: 0,
  enableSn: 0,
  status: 1,
  description: '',
  stock: 0,
  imageUrl: ''
})

const formErrors = reactive({ productName: '', categoryId: '', retailPrice: '' })
const submitting = ref(false)

// 计算属性
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 方法
const loadData = async () => {
  loading.value = true
  try {
    const params = {
      pageNo: currentPage.value,
      pageSize: pageSize.value,
      ...searchForm
    }

    // 格式化时间
    if (params.startTime) {
      params.startTime = new Date(params.startTime).toISOString().slice(0, 19).replace('T', ' ')
    }
    if (params.endTime) {
      params.endTime = new Date(params.endTime).toISOString().slice(0, 19).replace('T', ' ')
    }

    const res = await getProductPage(params)
    if (res.code === 0 || res.code === 200) {
      tableData.value = res.data.records || []
      total.value = res.data.total || 0
    } else {
      console.error('加载数据失败:', res.message || res.msg)
    }
  } catch (error) {
    console.error('加载数据失败:', error)
  } finally {
    loading.value = false
  }
}

const loadCategoryList = async () => {
  try {
    const res = await getCategoryList()
    if (res.code === 0 || res.code === 200) {
      categoryList.value = res.data || []
    } else {
      console.error('加载分类失败:', res.message || res.msg)
    }
  } catch (error) {
    console.error('加载分类失败:', error)
  }
}

const loadCategoryTree = async () => {
  try {
    const res = await getCategoryTree()
    if (res.code === 0 || res.code === 200 || Array.isArray(res)) {
      categoryTree.value = Array.isArray(res) ? res : (res?.data || [])
      // 将树形数据拍平成下拉选项，带缩进
      categoryOptions.value = flattenCategories(categoryTree.value)
    } else {
      console.error('加载分类树失败:', res.message || res.msg)
    }
  } catch (error) {
    console.error('加载分类树失败:', error)
  }
}

const loadBrandList = async () => {
  try {
    const res = await getBrandList()
    if (res.code === 0 || res.code === 200) {
      brandList.value = res.data || []
    } else {
      console.error('加载品牌失败:', res.message || res.msg)
    }
  } catch (error) {
    console.error('加载品牌失败:', error)
  }
}

const handleSearch = () => {
  currentPage.value = 1
  loadData()
}

const handleReset = () => {
  Object.assign(searchForm, {
    productName: '',
    categoryId: '',
    startTime: '',
    endTime: ''
  })
  currentPage.value = 1
  loadData()
}

const onPickCategory = (node) => {
  searchForm.categoryId = node?.id || ''
  currentPage.value = 1
  loadData()
}

const handlePageChange = (page) => {
  currentPage.value = page
  loadData()
}

const handleEdit = (item) => {
  editingItem.value = item
  Object.assign(formData, {
    productName: item.productName,
    categoryId: item.categoryId,
    brandId: item.brandId,
    spuCode: item.spuCode,
    barCode: item.barCode,
    purchasePrice: item.purchasePrice,
    standardCost: item.standardCost,
    retailPrice: item.retailPrice,
    taxRate: item.taxRate,
    enableBatch: item.enableBatch,
    enableSn: item.enableSn,
    status: item.status,
    description: item.description,
    stock: item.stock || 0,
    imageUrl: item.imageUrl || ''
  })
  showEditModal.value = true
}

const handleDelete = async (item) => {
  if (!confirm(`确定要删除商品"${item.productName}"吗？`)) {
    return
  }

  try {
    await deleteProduct(item.id)
    alert('删除成功')
    loadData()
  } catch (error) {
    console.error('删除失败:', error)
    alert('删除失败')
  }
}

const handleSubmit = async () => {
  // 轻量校验
  formErrors.productName = formData.productName ? '' : '请输入商品名称'
  formErrors.categoryId = formData.categoryId ? '' : '请选择分类'
  formErrors.retailPrice = formData.retailPrice !== '' ? '' : '请输入零售价'
  if (formErrors.productName || formErrors.categoryId || formErrors.retailPrice) {
    return
  }
  try {
    submitting.value = true
    if (showEditModal.value) {
      await updateProduct(editingItem.value.id, mapFormToProduct(formData))
      alert('更新成功')
    } else {
      await createProduct(mapFormToProduct(formData))
      alert('创建成功')
    }
    closeModal()
    loadData()
  } catch (error) {
    console.error('提交失败:', error)
    alert('操作失败')
  } finally {
    submitting.value = false
  }
}

const closeModal = () => {
  showAddModal.value = false
  showEditModal.value = false
  editingItem.value = null
  Object.assign(formData, {
    productName: '',
    categoryId: '',
    brandId: '',
    spuCode: '',
    barCode: '',
    purchasePrice: '',
    standardCost: '',
    retailPrice: '',
    taxRate: '',
    enableBatch: 0,
    enableSn: 0,
    status: 1,
    description: '',
    stock: 0,
    imageUrl: ''
  })
}

const getCategoryName = (categoryId) => {
  const category = categoryList.value.find(c => c.id === categoryId)
  return category ? category.categoryName : '-'
}

const formatPrice = (price) => {
  return Number(price || 0).toFixed(2)
}

// 将表单映射为后端 Product 字段
function mapFormToProduct(fd) {
  return {
    spuCode: fd.spuCode || null,
    barCode: fd.barCode || null,
    productName: fd.productName,
    categoryId: fd.categoryId || null,
    brandId: fd.brandId || null,
    purchasePrice: fd.purchasePrice || null,
    standardCost: fd.standardCost || null,
    retailPrice: fd.retailPrice,
    taxRate: fd.taxRate || null,
    enableBatch: fd.enableBatch,
    enableSn: fd.enableSn,
    status: fd.status,
    description: fd.description || null,
    stock: fd.stock || 0,
    imageUrl: fd.imageUrl || null,
    createName: localStorage.getItem('name') || localStorage.getItem('username') || ''
  }
}

const formatDate = (date) => {
  if (!date) return '-'
  return new Date(date).toLocaleString('zh-CN')
}

// 工具：把树形分类拍平为下拉选项
function flattenCategories(tree, depth = 0, acc = []) {
  if (!Array.isArray(tree)) return acc
  for (const node of tree) {
    if (!node) continue
    const indent = ' '.repeat(depth * 2)
    acc.push({ id: node.id, label: `${indent}${node.categoryName}` })
    if (Array.isArray(node.children) && node.children.length > 0) {
      flattenCategories(node.children, depth + 1, acc)
    }
  }
  return acc
}

// 生命周期
onMounted(() => {
  loadData()
  loadCategoryList()
  loadCategoryTree()
  loadBrandList()
})

// 处理图片上传
const handleImageUpload = async (event) => {
  const file = event.target.files[0]
  if (!file) return

  try {
    const res = await uploadImage(file)
    if (res.code === 0 || res.code === 200) {
      formData.imageUrl = res.data
      ElMessage.success('图片上传成功')
    } else {
      ElMessage.error(res.message || res.msg || '图片上传失败')
    }
  } catch (error) {
    console.error('图片上传失败:', error)
    ElMessage.error('图片上传失败')
  }

  // 清空input值，允许重复选择同一文件
  event.target.value = ''
}

// 删除图片
const removeImage = () => {
  formData.imageUrl = ''
}
</script>

<style scoped>
.product-layout { display:flex; min-height:100vh; background:#f5f5f5; }
.category-sidebar { width:260px; background:#fff; border-right:1px solid #eee; padding:16px; }
.sidebar-header { display:flex; flex-direction:column; gap:12px; }
.section-title { display:flex; align-items:center; justify-content:space-between; font-weight:600; color:#333; }
.add-btn { width:24px; height:24px; border:none; border-radius:50%; background:#3b82f6; color:#fff; cursor:pointer; }
.add-btn:hover { background:#2563eb; }

.product-list {
  padding: 20px;
  background: #f5f5f5;
  flex: 1;
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.page-header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

/* 按钮样式 */
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.3s;
}

.btn-primary {
  background: #1890ff;
  color: white;
}

.btn-primary:hover {
  background: #40a9ff;
}

.btn-secondary {
  background: #f0f0f0;
  color: #666;
}

.btn-secondary:hover {
  background: #e0e0e0;
}

.btn-info {
  background: #13c2c2;
  color: white;
}

.btn-danger {
  background: #ff4d4f;
  color: white;
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.btn-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 搜索区域 */
.search-section {
  background: white;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.search-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  align-items: end;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.form-group label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.form-control {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-control:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24,144,255,0.2);
}

.date-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-separator {
  color: #666;
  font-size: 14px;
}

.form-actions {
  display: flex;
  gap: 12px;
}

/* 表格区域 */
.table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 24px;
}

.table-container {
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 12px 8px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  vertical-align: middle;
}

.data-table th {
  background: #fafafa;
  font-weight: 600;
  color: #333;
  font-size: 14px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
}

.data-table td {
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

.table-container {
  overflow-x: auto;
  max-width: 100%;
  border-radius: 8px;
}

.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.product-name {
  font-weight: 500;
  color: #333;
  min-width: 120px;
  max-width: 200px;
}

.data-table th:nth-child(1) { width: 80px; }  /* 商品ID */
.data-table th:nth-child(2) { width: 150px; } /* 商品名称 */
.data-table th:nth-child(3) { width: 100px; } /* SPU编码 */
.data-table th:nth-child(4) { width: 120px; } /* 商品分类 */
.data-table th:nth-child(5) { width: 100px; } /* 品牌 */
.data-table th:nth-child(6) { width: 100px; } /* 建议零售价 */
.data-table th:nth-child(7) { width: 80px; }  /* 状态 */
.data-table th:nth-child(8) { width: 80px; }  /* 库存 */
.data-table th:nth-child(9) { width: 140px; } /* 创建时间 */
.data-table th:nth-child(10) { width: 100px; } /* 商品图片 */
.data-table th:nth-child(11) { width: 120px; } /* 操作 */

.price {
  color: #ff4d4f;
  font-weight: 600;
}

.stock {
  color: #52c41a;
  font-weight: 500;
}

.description {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-image {
  text-align: center;
}

.product-img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

.no-image {
  color: #999;
  font-size: 12px;
}

.image-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.image-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.preview-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

.status-badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.status-badge.active {
  background: #f6ffed;
  color: #52c41a;
  border: 1px solid #b7eb8f;
}

.status-badge.inactive {
  background: #fff2f0;
  color: #ff4d4f;
  border: 1px solid #ffccc7;
}

.actions {
  display: flex;
  gap: 8px;
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: #999;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

/* 分页 */
.pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-info {
  color: #666;
  font-size: 14px;
}

/* 弹窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h3 {
  margin: 0;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.modal-body {
  padding: 20px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.modal-body .form-actions {
  justify-content: flex-end;
  margin-top: 20px;
}

/* 响应式 */
@media (max-width: 768px) {
  .search-form {
    grid-template-columns: 1fr;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .pagination-section {
    flex-direction: column;
    gap: 12px;
  }

  .actions {
    flex-direction: column;
  }
}
</style>


